<template>
  <div class="contactBooks">
    <Header></Header>
    <div class="main">
      <div class="content df">
        <!-- <m-title :left-title="leftTitle"></m-title> -->
        <!-- contactBooks -->
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div class="dialog">姓名：{{tips.name}}</div>
        <div class="dialog">联系方式：{{tips.phone}}</div>
        <div class="dialog">办公地址：{{tips.address}} {{tips.rome}}</div>
        <div class="dialog">职位：{{tips.position}}</div>
        <div class="dialog">职位描述：{{tips.describe}}</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script src="./contactBooks.js"></script>

<style lang="scss" scoped>
.main{
  background-color: white;
  .el-tree{
    width: 100%;
  }
  .dialog{
    text-align: left;
    border: 1px solid #ccc;
  }
}
</style>
